import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { stepGroupDefaultProps } from './defaultProps';
import type { StepGroupOptions } from './type';

import numberToWord from '../_util/numberToWord';

export interface StepGroupProps extends StepGroupOptions, HTMLAttributes<HTMLDivElement> {}

const StepGroup: FC<StepGroupProps> = (props) => {
  const {
    className,
    stackable,
    unstackable,
    ordered,
    vertical,
    fluid,
    widths,
    attached,
    size,
    inverted,
    children,
    forwardedRef,
    ...stepGroupProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        stackable,
        { stackable, unstackable, ordered, fluid, inverted },
        vertical,
        { vertical },
        numberToWord(widths),
        attached,
        { attached },
        size,
        'steps',
        className,
      ),
      ...stepGroupProps,
    },
    children,
  );
};

StepGroup.displayName = 'StepGroup';
StepGroup.defaultProps = stepGroupDefaultProps;

export default StepGroup;
